/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {Button, Form, Popconfirm, Table, Tabs} from 'antd';

import FormBase from '../../../components/Base/FormBase';
import {connect} from "dva";
import moment from 'moment';
import 'moment/locale/zh-cn';
import DescGroup from "../../../components/DescriptionGroup";
import ViewTitle from "../../../components/ViewTitle";
import {ModalView} from "antd-extra";
import ModalCreateInboundLot from "./ModalCreateInboundLot";
import styles from "../../index.less";
import ModalInboundLotDetail from "./ModalInboundLotDetail";

moment.locale('zh-cn');
const table = 'ProcureMaterialRecord';
const {TabPane} = Tabs;
@Form.create()
@connect(({
            user,
            global,
            dynamicLabel,
            material, procure,
            store
          }) => ({...user, ...material, ...dynamicLabel, ...global, ...procure, ...store}))
export default class ModalInboundOrderDetail extends FormBase {
  constructor(props) {
    super(props);
    const {values} = this.props;
    this.state = {...values};
  }

  componentDidMount() {
    const {values} = this.props;
    const {pmLotId} = values;

    this.props.dispatch({
      type: 'procure/findProcureMaterialLot',
      payload: {pmLotId}
    });
    this.props.dispatch({
      type: 'global/getModel',
      payload: {table: 'ProcureMaterialRecord'}
    });
    this.props.dispatch({
      type: 'store/findInboundLots',
      payload: {pmLotId}
    });

  }

  onInboundLotDetail = values => {
    ModalView.open(ModalInboundLotDetail, {
      title: '入库记录详情',
      width: '920px',
      maskClosable: false
    }, {
      values
    });
  };
  cols = () => {
    const {isEdit = true} = this.props;
    return [
      {title: "采购数量", key: "count", dataIndex: "count"},
      {title: "入库数量", key: "inboundCount", dataIndex: "inboundCount"},
      {
        title: "入库时间", key: "inboundDate", dataIndex: "inboundDate", render: value => {
          return value ? <div>{moment(value).format('YYYY-MM-DD')}</div> : undefined;
        }
      },
      {
        title: "操作", key: "opt", dataIndex: "opt", render: (value, record) => {
          return <div><a style={{marginRight: '6px'}}
                         onClick={() => {
                           this.onInboundLotDetail(record);
                         }}>详情</a>
            {<Popconfirm
              title="确认删除"
              onConfirm={() => {
                this.props.dispatch({
                  type: 'store/deleteInboundLot',
                  payload: record
                }).then(res => {
                  this.requestReturn(res);
                  this.componentDidMount();
                });
              }}
              okText="是"
              cancelText="否"
            >
              <a disabled={!isEdit} style={{marginRight: '6px'}}>删除</a>
            </Popconfirm>}
          </div>;
        }
      }
    ];
  };

  render() {
    const {style, cols = 3, values = {}, isEdit = true,inboundLots=[]} = this.props;
    const model = this.props[`${table}Model`];
    if (!model) {
      return <div></div>;
    }
    const labels = this.model2labels(model);

    return (
      <Form style={{...style}}>
        <ViewTitle
          title={'物料采购单信息'}
          level={1}
        ></ViewTitle>
        <DescGroup
          {...{
            labels,
            values,
            size: 'default',
            column: cols
          }}
        ></DescGroup>
        <ViewTitle title={`入库记录列表`}
                   level={1}
                   actions={<Button type={'primary'}
                                    disabled={!isEdit}
                                    onClick={() => {
                                      ModalView.open(ModalCreateInboundLot, {
                                          title: '添加入库记录',
                                          width: "1080px"
                                        },
                                        {
                                          values,
                                          callback: lot => {
                                            console.log(lot);
                                            lot.lotType='采购入库'
                                            this.props.dispatch({
                                              type: 'store/createInboundLot',
                                              payload: lot
                                            }).then(res => {
                                              this.requestReturn(res);
                                              this.componentDidMount();
                                            });
                                          }
                                        });
                                    }}
                   >添加</Button>}
        ></ViewTitle>
        <Table
          className={styles.antTable}
          bordered={true}
          columns={this.cols()}
          dataSource={inboundLots}
          scroll={{x: true}}
          pagination={{pageSize: 100}}
          //scroll={{ x: 1300 }}
        ></Table>
      </Form>
    );
  }
}

